<template>
    <div ref="chartRef" :style="{width: '100%', height: '100%'}"></div>
</template>

<script setup>
    import {useEcharts} from '@/hooks/useEcharts';
    import * as echarts from 'echarts';

    const props = defineProps({
        width: String,
        height: String,
        theme: String,
        bgColor: String,
        title: String,
        subtitle: String,
        data: null,     // 曲线数据
        xAxisData: null // x轴数据
    });

    // 柱状图选项
    const option = {
        grid: {//占父级容器
            top:'10px',
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['粒子传感器_21#', '粒子传感器_22#', '压差_02#', '4合一采集器#02', '4合一采集器#01'],
            axisLine:{
                show:false
            },
            axisTick: {
                show: false
            },
            axisLabel:{
                color: 'white',
                fontSize: 12,
                formatter:function (value,index) {
                    return value;
                },
                rotate: 30
            }
        },
        yAxis: {
            type: 'value',
            splitLine:{ //网格线
                show:false
            },
            yAxisLabel:{
                color: 'white',
                fontSize: 12,
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: '#344572',
            borderColor: '#344572',
            textStyle:{
                color: 'white'
            }

        },
        series: [
            {
                barWidth: 14,//柱子的宽度
                data: [29, 50, 53, 31, 63],
                type: 'bar',
                itemStyle: {
                    normal: {
                        //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                        barBorderRadius: [10, 10, 10, 10],
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#51A6FC' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#48DFFE' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }

                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    color: '#A8AAFF',
                    fontSize: 12,
                    formatter:function ({value,params}){
                        return value;
                    },
                },
            }
        ]
    };

    const {
        chartRef,
        chart, nvll,
        echartsResizeFun
    } = useEcharts({props, option}); // {props: props, option: option}
</script>
<style scoped>
    :deep(.el-card__body){
        padding: 0 !important;
    }
</style>